<template>
	<div class="tab_content safeBottom">
		<div v-bind:class="['tab_item' ,(selectedIndex == index) ? 'tab_item_selected':'']" v-for="(value, index) in items" @click="barClick(index)">
			<img :src="(selectedIndex == index) ? value.iconS:value.iconN" width="25" height="25" />
			<label>{{value.title}}</label>
		</div>
	</div>
</template>

<script>
	export default {
		props: ["items"],
		data() {
			return {
				selectedIndex: 0,
			}
		},
		methods:{
			barClick:function (index) {
				// console.log("点击："+index)
				this.selectedIndex = index
				this.$emit('itemClick', this.selectedIndex)
			}
		},
		mounted() {
			// let type = this.$route.query.type;
			// console.log('拿到type:' + type);
		}
	}
</script>

<style>
	.tab_content {
		display: flex;
		flex-direction: row;
		background-color: white;
		border-top: 1px solid #cdcdcd;
	}
	.tab_item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		align-items: center;
	}
	.tab_item img {
		margin-top: 3px;
	}
	.tab_item label {
		margin-top: 5px;
		margin-bottom: 5px;
		color: #707070;
		
	}
	.tab_item_selected label {
		color: #f8914d;
	}
</style>
